<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="产品状态" prop="status">
          <el-radio-group v-model="queryParams.status" @change="handleQuery">
            <el-radio-button
              :key="-2"
              :label="-2"
            >
              全部
            </el-radio-button>
            <el-radio-button
              v-for="item in wms_check_status"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品编号" prop="product_id">
          <el-input
            v-model="queryParams.product_id"
            placeholder="请输入产品编号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="产品名称" prop="product_name">
          <el-input
            v-model="queryParams.search"
            placeholder="请输入产品名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt20">

      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="6"><span style="font-size: large">产品列表</span></el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['wms:check:all']"
          >新增</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="productList" border class="mt20"
                :row-key="getRowKey"
                empty-text="暂无产品"
                cell-class-name="vertical-top-cell"
      >
        <el-table-column label="产品ID" align="left" prop="product_id" width="200" />
        <el-table-column label="产品名称" align="left" width="200" prop="product_name" />
        <el-table-column label="产品版本" align="left" width="200" prop="version" />

        <el-table-column label="操作时间" align="left" width="200">
          <template #default="{ row }">
            <div>创建：{{ parseTime(row.creation_date, '{yyyy} {mm}-{dd} {hh}:{ii}') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="产品描述" align="left" prop="description" />

        <!-- <el-table-column label="操作人" align="left">
          <template #default="{ row }">
            <div>{{ row.createBy }}</div>
            <div v-if="row.updateBy">{{ row.updateBy }}</div>
          </template>
        </el-table-column> -->
        <el-table-column label="产品状态" align="center" prop="status" width="120">
          <template #default="{ row }">
            <dict-tag :options="wms_check_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right" class-name="small-padding fixed-width" width="120">
          <template #default="scope">
            <div>
              <el-popover
                placement="left"
                title="提示"
                :width="300"
                trigger="hover"
                :disabled="scope.row.status != 4"
                :content="'产品【' + scope.row.product_name + '】已上市，无法修改！' "
              >
                <template #reference>
                  <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['wms:check:all']" :disabled="scope.row.status === 4">修改</el-button>
                </template>
              </el-popover>
            </div>
            <div>
              <el-button link type="primary" @click="handleGoDetail(scope.row)" v-hasPermi="['wms:check:all']">查看</el-button>
            </div>
            <div>
              <el-popover
                placement="right"
                title="提示"
                :width="300"
                trigger="hover"
                :disabled="[1,2].includes(scope.row.status)"
                :content="'产品【' + scope.row.product_name + '】已生产或已上市，无法删除！' "
              >
                <template #reference>
                  <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['wms:check:all']" :disabled="[3,4].includes(scope.row.status)">删除</el-button>
                </template>
              </el-popover>
              <!-- <el-button link type="primary" @click="handlePrint(scope.row)" v-hasPermi="['wms:check:all']">打印</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-row>
    </el-card>
    <check-product-detail
      ref="checkProductDetailRef"
      :model-value="watchDetailObj.show"
      :product-name="watchDetailObj.productName"
      @handle-cancel-click="watchDetailObj.show = false"
    />
  </div>
</template>

<script setup name="Product">
import {ProductList, delProduct} from "@/api/wms-django/product/product";
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import CheckProductDetail from "@/views/wms/product/check/CheckProductDetail.vue";
const { proxy } = getCurrentInstance();
// const {wms_check_status} = proxy.useDict("wms_check_status");
const wms_check_status = ref([
  {
    label: '设计阶段',
    value: '1'
  },
  {
    label: '测试阶段',
    value: '2'
  },
  {
    label: '生产阶段',
    value: '3'
  },
  {
    label: '上市阶段',
    value: '4'
  }
])
const productList = ref([]);
const loading = ref(true);
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    product_id: undefined,
    search: undefined,
    status: -2,
  },
});
const watchDetailObj = ref({
  show: false,
  productName: null
})
const checkProductDetailRef = ref(null)
const { queryParams } = toRefs(data);

/** 查询入库单列表 */
function getList() {
  loading.value = true;
  const query = {...queryParams.value}
  if (query.status === -2) {
    query.status = null
  }
  ProductList(query).then(response => {
    productList.value = response.data.results;
    total.value = response.data.count;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
  proxy.$router.push({ path: "/ProductDetail" });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.product_id;
  proxy.$modal.confirm('确认删除产品【' + row.product_name + '】吗？').then(function() {
    loading.value = true;
    return delProduct(_ids);
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功");
  }).finally(() => {
    loading.value = false;
    getList();
  });
}

function handleUpdate(row) {
  proxy.$router.push({ path: "/ProductDetail",  query: { id: row.product_id } });
}

function handleGoDetail(row) {
  watchDetailObj.value.productName = row.product_name
  checkProductDetailRef.value.setCheckProductId(row.product_id)
  watchDetailObj.value.show = true
  checkProductDetailRef.value.handleQuery()
}

function getRowKey(row) {
  return row.product_id
}
getList();
</script>
<style lang="scss">
.el-statistic__content {
  font-size: 14px;
}
.el-table .vertical-top-cell {
  vertical-align: top
}
</style>
